<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">
                <span>编辑个人资料</span>
            </div>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <div style="width:100%;display:flex;">
                    <div class="left" style="flex:1">
                        <el-form-item label="真实姓名">
                            <el-input v-model="form.realName" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名">
                            <el-input v-model="form.userName" :disabled="true"></el-input>
                        </el-form-item>
                        <!--<el-form-item label="密码">
                            <el-input v-model="form.usePwd"></el-input>
                        </el-form-item>-->
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="学号">
                            <el-input v-model="form.userId" :disabled="true"></el-input>
                        </el-form-item>
                        
                        
                        <el-form-item label="出生日期">
                            <el-col :span="11">
                                <el-date-picker
                                    type="date"
                                    placeholder="出生日期"
                                    v-model="form.birth"
                                    value-format="yyyyMMdd"
                                ></el-date-picker>
                            </el-col>
                        </el-form-item>
                        
                        <!--<el-form-item label="所属部门">
                            <el-select @change="departmentChange" v-model="form.departmentId" placeholder="请选择">
                                <el-option v-for="item in departmentList" :key="item.departmentId" :label="item.departmentName" :value="item.departmentId"></el-option>
                            </el-select>
                        </el-form-item>-->
                    </div>
                    <div class="left" style="flex:1">
                        <!--<el-form-item label="地址">-->
                            <!--<el-cascader @change="selectPlace" :options="options"></el-cascader>-->
                        <!--</el-form-item>-->
                        <el-form-item label="地址">
                            <el-input v-model="form.address"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱地址" prop="email">
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                        <el-form-item label="电话号码" prop="phone">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" prop="idCard">
                            <el-input v-model="form.idCard"></el-input>
                        </el-form-item>
                        <!--<el-form-item label="所属班级">
                            <el-select @change="classChange" v-model="form.classId" clearable placeholder="请选择">
                              <el-option v-for="item in classList" :key="item.classId" :label="item.className" :value="item.classId"></el-option>
                            </el-select>
                        </el-form-item>-->

                        <el-form-item>
                            <el-button type="primary" @click="submitForm('form')">提交修改</el-button>
                            <el-button @click="reSet">重置</el-button>
                            <!--<el-button @click="toLogin">恢复</el-button>-->
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            classList:[{
              classId:'1',
              className:'一班'
            },{
              classId:'2',
              className:'二班'
            },{
              classId:'3',
              className:'三班'
            },{
              classId:'4',
              className:'四班'
            }],//班级信息
            departmentList:[{
              departmentId:'1',
              departmentName:'组织部'
            },{
              departmentId:'2',
              departmentName:'志愿服务站'
            },{
              departmentId:'3',
              departmentName:'师友电脑维修部'
            },{
              departmentId:'4',
              departmentName:'办公室'     
            },{
              departmentId:'5',
              departmentName:'学习部'     
            },{
              departmentId:'6',
              departmentName:'文体部'     
            },{
              departmentId:'7',
              departmentName:'宣传部'     
            },{
              departmentId:'8',
              departmentName:'网络技术部'     
            },{
              departmentId:'9',
              departmentName:'外联部'     
            },{
              departmentId:'10',
              departmentName:'辩论队'     
            }],
            form: {

//		      userName: "麦导",
//		      role:'系统管理员',
//		      sex: "女",
//		      userId: '201641404229',
////		      usePwd: "a2983277940",
//		      birth: "1997-08-21",
//		      address: "广东省湛江市",
//		      email: "9696996969@qq.com",
//		      idCard: "440900000000000000",
//		      phone: "15731838339",
//		      classId: "1",
//		      className: "三班",
//		      createTime: "",
//		      departmentId: "2",
//		      departmentName: "文学社",
//		      updateTime: "",
//		      realName: "麦广善"
		      
		      userName: "",
		      role:'',
		      sex: "",
		      userId: '',
//		      usePwd: "a2983277940",
		      birth: "",
		      address: "",
		      email: "",
		      idCard: "",
		      phone: "",
		      classId: "",
		      className: "",
		      createTime: "",
		      departmentId: "",
		      departmentName: "",
		      updateTime: "",
		      realName: ""
		      
		      
            },
            options: [
                {
                    value: '广东省',
                    label: '广东省',
                    children: [
                        {
                            value: '广州市',
                            label: '广州市',
                            children: [
                                {
                                    value: '天河区',
                                    label: '天河区'
                                },
                                {
                                    value: '海珠区',
                                    label: '海珠区'
                                }
                            ]
                        },
                        {
                            value: '东莞市',
                            label: '东莞市',
                            children: [
                                {
                                    value: '长安镇',
                                    label: '长安镇'
                                },
                                {
                                    value: '虎门镇',
                                    label: '虎门镇'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: '湖南省',
                    label: '湖南省',
                    children: [
                        {
                            value: '长沙市',
                            label: '长沙市',
                            children: [
                                {
                                    value: '岳麓区',
                                    label: '岳麓区'
                                }
                            ]
                        }
                    ]
                }
            ],
            rules: {
                realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
                userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
//              usePwd: [{ required: true, message: '请选择密码', trigger: 'blur' }],
                sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
                userId: [{ required: true, message: '请输入学号', trigger: 'blur' }],
                birth: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
                address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                email: [{ required: false, message: '请输入邮箱地址', trigger: 'blur' },{ pattern:/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: "请输入正确的邮箱", trigger: "blur"}],
                idCard: [{ required: false, message: '请输入身份证号', trigger: 'blur' },{ pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur"}],
                phone: [{ required: false, message: '请输入电话号码', trigger: 'blur' },{ pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }],
                classId: [{ required: true, message: '请选择所属班级', trigger: 'change' }],
                className: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
//              departmentId: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
//              departmentName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
            }
        };
    },
    created() {
        this.getData();
  	},
    methods: {
    	async getData(){
		    let res = await this.$Http.getUserInfo();
		    console.log(res.data);

		    this.form.userName = res.data.userName;
		    //this.form.role = res.data.role;
		    this.form.sex = res.data.sex;
		    this.form.userId = res.data.userId;
		    this.form.birth = res.data.birth;
		    this.form.address = res.data.address;
		    this.form.email = res.data.email;
		    this.form.idCard = res.data.idCard;
		    this.form.phone = res.data.phone;
		    this.form.classId = res.data.classId;
		    this.form.className = res.data.className;
		    this.form.departmentId = res.data.departmentId;
		    this.form.departmentName = res.data.departmentName;
		    this.form.realName = res.data.realName;
//		    this.form.createTime = res.data.createTime;
    
		    console.log(this.form);
    	},
        async submitForm(form) {
          this.$refs[form].validate(valid => {
	        if (valid) {
	          //alert("submit!");
		      const {model} = this.$refs[form]
	          console.log(model);          
	          this.submitInfo(model);
	        } else {
	          console.log("error submit!!");
	          return;
	        }
	      });
          
//        
        },
        //提交
        async submitInfo(model){
        	let res = await this.$Http.editUserInfo(
	          	model,
	          	true
	          );
	        this.$message.success(res.msg);
        },	
        reSet(){
        	 this.getData();
        },
        toLogin() {
            this.$router.push('/login');
        },
        selectPlace(value){
          this.form.address = value[0] + value[1] + value[2]
          console.log(this.form.address);
        },
        classChange(value){
          this.classList.map(item=>{
            if(value == item.classId){
              this.form.className = item.className
            }
          })
        },
        departmentChange(value){
          this.departmentList.map(item=>{
            if(value == item.departmentId){
              this.form.departmentName = item.departmentName
            }
          })
        }
    }
};
</script>

<style scoped>
.el-input {
    width: 220px;
}
.ms-login {
    width: 700px;
}
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    /*background-image: url(../../assets/img/login-bg.jpg);*/
   	background: #FFFFFF;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #000;
    border-bottom: 1px solid #ddd;
    position: relative;
}
.ms-login {
    position: absolute;
    width: 700px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    padding: 0 20px;
}
.el-form {
    margin-top: 20px;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
    cursor: pointer;
}
</style>